<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-100" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor, 'borderBottom': borderBottom}">
			<view class="title">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30"></text></view>
				<text>做任务赚经验值</text>
			</view>
		</view>
		<view class="Experience">
			<text>我的经验值</text>
			<view class="value">
				<view class="left">{{experienceValue}}</view>
				<!-- <view class="right">兑换优惠券</view> -->
			</view>
			<view class="icon">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%B7%AF%E5%BE%84%2034.png"></image>
			</view>
		</view>
		<view class="top">
			<view class="days">
				<view class="left">已连续签到<text>{{CheckInDays}}</text>天</view>
				<view class="remind">签到提醒<switch checked="true" color="#e8b2dc" style="transform:scale(0.7)"/></view>
			</view>
			<view class="dayList">
				<view class="day_item" v-for="(i, index) in SigninColumn" :key="i.dex">
					<view class="top" :style="{ background: i.bgc}" @click="signIn(i)">
						<view class="num">×{{i.num}}</view>
						<image :src="i.src"></image>
					</view>
					<view class="bottom" v-if="i.rewardFlag">已签</view>
					<view class="bottom" v-else>第{{i.text}}天</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="" v-if="DailyTasks.length != 0">
				<view class="DailyTasks">
					<view class="title">
						<text>每日任务</text>
						<view class="desc">任务每日0点刷新，记得每天都来看看哦</view>
					</view>
					<!-- <view class="btn" @click="CollectAll(4)">一键领取</view> -->
				</view>
				<view class="bottom">
					<view class="taskList" v-for="i in DailyTasks" :key="i.id">
						<view class="taskitem">
							<view class="left">
								<view class="title">{{i.taskName}}</view>
								<view class="d-flex" style="width: 100%;">
									<text style="color: #9D9D9E;">奖励</text>
									<view class="d-flex" v-for="(j, dex) in i.reward" :key="j.dex">
										<view class="reward" v-if="j.rewardType === 3">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204227.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 1">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/exp.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 2">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 4">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%8A%BD%E5%A5%96.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view :class="[i.finishFlag? 'btn' : 'greybtn']">{{i.finishFlag? '已完成' : '未完成'}}</view>
								<view class="progress">{{i.finishFlag? '1' : '0'}}/1</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="NewbieTask.length != 0">
				<view class="DailyTasks">
					<view class="title">
						<text>新手任务</text>
						<view class="desc">任务每日0点刷新，记得每天都来看看哦</view>
					</view>
					<!-- <view class="btn" @click="CollectAll(3)">一键领取</view> -->
				</view>
				<view class="bottom">
					<view class="taskList" v-for="i in NewbieTask" :key="i.id">
						<view class="taskitem">
							<view class="left">
								<view class="title">{{i.taskName}}</view>
								<view class="d-flex" style="width: 100%;">
									<text style="color: #9D9D9E;">奖励</text>
									<view class="d-flex" v-for="(j, dex) in i.reward" :key="j.dex">
										<view class="reward" v-if="j.rewardType === 3">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204227.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 1">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/exp.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 2">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 4">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%8A%BD%E5%A5%96.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view :class="[i.finishFlag? 'btn' : 'greybtn']">{{i.finishFlag? '已完成' : '未完成'}}</view>
								<view class="progress">{{i.finishFlag? '1' : '0'}}/1</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="OnlineDurationTasks.length != 0">
				<view class="DailyTasks">
					<view class="title">
						<text>在线时长任务</text>
						<view class="desc">任务每日0点刷新，记得每天都来看看哦</view>
					</view>
					<!-- <view class="btn" @click="CollectAll(2)">一键领取</view> -->
				</view>
				<view class="bottom">
					<view class="taskList" v-for="i in OnlineDurationTasks" :key="i.id">
						<view class="taskitem">
							<view class="left">
								<view class="title">{{i.taskName}}</view>
								<view class="d-flex" style="width: 100%;">
									<text style="color: #9D9D9E;">奖励</text>
									<view class="d-flex" v-for="(j, dex) in i.reward" :key="j.dex">
										<view class="reward" v-if="j.rewardType === 3">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204227.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 1">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/exp.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 2">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 4">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%8A%BD%E5%A5%96.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view :class="[i.finishFlag? 'btn' : 'greybtn']">{{i.finishFlag? '已完成' : '未完成'}}</view>
								<view class="progress">{{i.finishFlag? '1' : '0'}}/1</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="bosomFirendTasks.length != 0">
				<view class="DailyTasks">
					<view class="title">
						<text>挚友任务</text>
						<view class="desc">任务每日0点刷新，记得每天都来看看哦</view>
					</view>
					<!-- <view class="btn" @click="CollectAll(1)">一键领取</view> -->
				</view>
				<view class="bottom">
					<view class="taskList" v-for="i in bosomFirendTasks" :key="i.id">
						<view class="taskitem">
							<view class="left">
								<view class="title">{{i.taskName}}</view>
								<view class="d-flex" style="width: 100%;">
									<text style="color: #9D9D9E;">奖励</text>
									<view class="d-flex" v-for="(j, dex) in i.reward" :key="j.dex">
										<view class="reward" v-if="j.rewardType === 3">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204227.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 1">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/exp.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 2">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
										<view class="reward" v-if="j.rewardType === 4">
											<view class="icon">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%8A%BD%E5%A5%96.png"></image>
											</view>
											<view class="amount">{{j.rewardCount}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view :class="[i.finishFlag? 'btn' : 'greybtn']">{{i.finishFlag? '已完成' : '未完成'}}</view>
								<view class="progress">{{i.finishFlag? '1' : '0'}}/1</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { TaskApi } from '../../http/taskApi';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				ctype:0,
				bgcolor:'transparent',
				borderBottom: 'none',
				experienceValue: 0,
				CheckInDays: 0,
				SigninColumn:[ // 七日签到列表
					{
						num: "1",
						dex: 0,
						text: 1,
						// bgc: "#DADBDB",
						bgc:"linear-gradient(90deg, #5DB0FE 0%, rgba(93,176,254,0.8) 1%, #E8BAFC 100%)",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png",
						rewardFlag: false
					},
					{
						num: "1",
						dex: 1,
						text: 2,
						bgc: "linear-gradient(#D951C6 1%, #FB9AB0 100%)",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png",
						rewardFlag: false
					},
					{
						num: "1",
						dex: 2,
						text: 3,
						bgc: "linear-gradient(#5DB0FE 1%, #86F5C9 100%)",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png",
						rewardFlag: false
					},
					{
						num: "1",
						dex: 3,
						text: 4,
						bgc: "#FFCC7B",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png",
						rewardFlag: false
					},
					{
						num: "1",
						dex: 4,
						text: 5,
						bgc: "linear-gradient(#5DB0FE 0%, rgba(93,176,254,0.8) 1%, #E8BAFC 100%)",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png",
						rewardFlag: false
					},
					{
						num: "1",
						dex: 5,
						text: 6,
						bgc: "#D83F7D",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png",
						rewardFlag: false
					},
					{
						num: "可抽",
						dex: 6,
						text: 7,
						bgc: "#63C6B3",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png",
						rewardFlag: false
					}
				],
				DailyTasks: [], // 每日任务数据
				OnlineDurationTasks: [], // 在线时长任务数据
				NewbieTask : [], // 新手任务数据
				bosomFirendTasks: [] // 挚友任务
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#ffffff'
				this.borderBottom = '1px solid rgba(204, 204, 204, .2)'
			}else{
				this.bgcolor = 'transparent'
				this.borderBottom = 'none'
			}
		},
		methods: {
			changType(type){
				this.ctype = type
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getTaskValue() {
				let res = await TaskApi.getTaskValue()
				this.experienceValue = res.experienceValue
			},
			async getRewardList() {//查询签到列表
				let res = await TaskApi.getRewardList()
				this.CheckInDays = res.count
				res.signRewardListVoList.forEach((item, dex) => {
					if(item.rewardType == 1) {
						this.SigninColumn[dex].src = 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/exp.png'
					} else if(item.rewardType == 2) {
						this.SigninColumn[dex].src = item.resource.icon
					} else if(item.rewardType == 3) {
						this.SigninColumn[dex].src = 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png'
					} else if(item.rewardType == 9){
						this.SigninColumn[dex].src = 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0219161950.png'
					} else {
						this.SigninColumn[dex].src = ''
					}
					this.SigninColumn[dex].num = item.rewardCount
					this.SigninColumn[dex].rewardFlag = item.rewardFlag
					this.SigninColumn[dex].text = item.stairsCondition
					if(item.rewardFlag) {
						this.SigninColumn[dex].bgc = '#DADBDB'
					}
				})
			},
			async getTaskList() {
				let res = await TaskApi.getTaskList()
				res.records.forEach((item, index) => {
					if(item.type == 5) { // 挚友任务
						this.bosomFirendTasks.push({
							id: item.id,
							taskName : item.taskName,
							finishFlag: item.finishFlag,
							reward:item.rewardListTwo
						})
					}
					if(item.type == 4) { // 每日任务
						this.DailyTasks.push({
							id: item.id,
							taskName : item.taskName,
							finishFlag: item.finishFlag,
							reward:item.rewardListTwo
						})
					}
					if(item.type == 3) { // 新手任务
						this.NewbieTask.push({
							id: item.id,
							taskName : item.taskName,
							finishFlag: item.finishFlag,
							reward:item.rewardListTwo
						})
					}
					if(item.type == 2) { // 在线时长任务
						this.OnlineDurationTasks.push({
							id: item.id,
							taskName : item.taskName,
							finishFlag: item.finishFlag,
							reward:item.rewardListTwo
						})
					}
				})
			},
			async CollectAll(type) {
				if(type === 4) {
					this.DailyTasks.forEach((item, idx) => {
						if(item.receiveFlag) {
							this.OneClickClaim(type)
							return
						}
					})
					uni.showToast({
						icon: 'none',
						title: '暂无奖励可领取!',
						position: 'bottom',
						duration: 1500
					})
				}
				if(type === 3) {
					this.NewbieTask.forEach((item, idx) => {
						if(item.receiveFlag) {
							this.OneClickClaim(type)
							return
						}
					})
					uni.showToast({
						icon: 'none',
						title: '暂无奖励可领取!',
						position: 'bottom',
						duration: 1500
					})
				}
			},
			async OneClickClaim(type) {
				let formdata = {
					type: type
				}
				await TaskApi.CollectAll(formdata)
				uni.showToast({
					icon: 'none',
					title: '领取成功!',
					position: 'bottom',
					duration: 1500
				})
			},
			async signIn(i) {
				if(this.CheckInDays==0 || i.text==1){
					if(i.text==1 && !this.SigninColumn[0].rewardFlag){
						uni.showToast({
							icon: 'none',
							title: '签到成功!',
							position: 'bottom',
							duration: 1500
						})
						await TaskApi.SingIn()
						this.getRewardList();
						return
					} else {
						uni.showToast({
							icon: 'none',
							title: '该奖励已经领取了喔~',
							position: 'bottom',
							duration: 1500
						})
					}
				}else{
					let index=i.dex
					if(this.SigninColumn[index-1].rewardFlag){
						await TaskApi.SingIn()
						this.getRewardList();
						uni.showToast({
							icon: 'none',
							title: '签到成功!',
							position: 'bottom',
							duration: 1500
						})
						return
					}
					if(i.rewardFlag) {
						uni.showToast({
							icon: 'none',
							title: '已经签到过了哟~',
							position: 'bottom',
							duration: 1500
						})
						return
					}
					if(!i.rewardFlag) {
						this.SigninColumn.forEach((item,idx) => {
							if(item.rewardFlag) {
								uni.showToast({
									icon: 'none',
									title: '请在'+((i.text)-(idx+1))+'天后进行签到~',
									position: 'bottom',
									duration: 1500
								})
								return
							}
						})
					}
				}
			},
			async QueryRewordList(dex) {
				let res = await TaskApi.QueryRewordList()
				console.log(res.signRewardListVoList[dex]);
			}
		},
		mounted() {
			this.getTaskValue()
			this.getRewardList()
			this.getTaskList()
		}
	}
</script>

<style scoped lang="scss">
.main {
	overflow: hidden;
	background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%92%99%E7%89%88%E7%BB%84%206.png) !important;
	.top {
		width: 710rpx;
		height: 340rpx;
		background-color: rgba(255, 255, 255, .6);
		margin: 30rpx auto 0;
		border-radius: 25rpx;
		overflow: hidden;
		.days {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #878787;
			margin-top: 20rpx;
			.left {
				font-size: 28rpx;
				margin-left: 20rpx;
				font-weight: 700;
				text {
					font-size: 36rpx;
					color: #E63828;
					font-weight: 700;
					padding: 0 5rpx;
				}
			}
			.remind {
				margin-top: 10rpx;
				color: #878787;
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}
		}
		.dayList {
			width: 98%;
			margin: 30rpx auto 0;
			display: flex;
			justify-content: space-between;
			.day_item {
				width: 13%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.top {
					width: 90%;
					height: 139rpx;
					margin: 0 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					.num {
						color: #FFF;
						font-size: 22rpx;
						margin: 15rpx 0 10rpx;
					}
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
				.bottom {
					width: 100%;
					height: 60rpx;
					margin-top: 10rpx;
					text-align: center;
					color: #898989;
					font-size: 22rpx;
					font-weight: 700;
				}
			}
		}
	}
	.content {
		width: 100%;
	}
	.Experience {
		margin: 240rpx 0 0 60rpx;
		overflow: hidden;
		text {
			font-weight: 700;
			font-size: 30rpx;
		}
		.value {
			display: flex;
			align-items: center;
			margin-top: 16rpx;
			height: 60rpx;
			.left {
				font-size: 70rpx;
				font-weight: 700;
				margin-right: 10rpx
			}
			.right {
				display: inline-block;
				height: 40rpx;
				color: #fff;
				font-size: 24rpx;
				padding: 8rpx 24rpx 8rpx;
				margin-top: 6rpx;
				border-radius: 15rpx;
				background-color: #ff4f6c;
				box-shadow: 10rpx 10rpx 8rpx rgba(255, 79, 108, .2);
			}
		}
		.icon {
			image {
				margin-left: 18rpx;
				margin-top: 26rpx;
				width: 24.91rpx;
				height: 24.91rpx;
			}
		}
	}
	.box {
		width: 100%;
		background-color: #fff;
		padding: 20rpx 0;
		margin: 30rpx auto 30rpx;
		border-radius: 25rpx 25rpx 0 0;
		position: absolute;
		overflow: hidden;
		.DailyTasks {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 50rpx 0 40rpx;
			.title {
				display: flex;
				flex-direction: column;
				height: 80rpx;
				text {
					width: 100%;
					font-size: 32rpx;
					text-align: left;
					margin-left: 50rpx;
					font-weight: 700;
				}
				.desc {
					color: #9D9D9E;
					font-size: 24rpx;
					font-weight: normal;
					margin-top: 10rpx;
				}
			}
			.btn {
				background-color: #C7C8C9;
				color: #fff;
				font-size: 24rpx;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 20rpx;
				border-radius: 50rpx;
			}
		}
		.bottom {
			width: 710rpx;
			margin: 0rpx auto 0;
			border-radius: 25rpx;
			overflow: hidden;
			.taskList {
				margin-top: 20rpx;
				width: 100%;
				.taskitem {
					width: 100%;
					height: 130rpx;
					background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204148.png);
					background-size: 100% 100%;
					display: flex;
					justify-content: space-around;
					margin-bottom: 20rpx;
					.left,.right {
						height: 100%;
						display: flex;
						align-items: center;
					}
					.left {
						display: flex;
						flex: 1;
						justify-content: center;
						flex-direction: column;
						padding-left: 34rpx;
						.title {
							width: 100%;
							height: 40rpx;
							font-size: 28rpx;
							color: #231815;
							font-weight: 700;
							margin-bottom: 5rpx;
						}
						.reward {
							display: flex;
							color: #595757;
							font-size: 24rpx;
							align-items: center;
							margin-right: 10rpx;
							.icon {
								image {
									padding: 0 10rpx;
									width: 29.86rpx;
									height: 23.96rpx;
									margin-bottom: 4rpx;
								}
							}
							.amount {
								margin-top: 2rpx;
								color: #F42052;
								font-weight: 700;
								font-size: 24rpx;
							}
						}
					}
					.right {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-size: 24rpx;
						align-items: center;
						margin-right: 30rpx;
						.btn {
							background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
							color: #fff;
							font-size: 24rpx;
							padding: 10rpx 20rpx;
							border-radius: 50rpx;
							margin: 0rpx 0 0rpx;
						}
						.greybtn {
							background: #dadbdb;
							color: #fff;
							font-size: 24rpx;
							padding: 10rpx 20rpx;
							border-radius: 50rpx;
							margin: 0rpx 0 0rpx;
						}
						.progress {
							color: #9D9D9E;
						}
					}
				}
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	height: 80rpx;
	margin-right: 47rpx;
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 32rpx;
		text-align: center;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
</style>
